<template>
	<view class="order-item-page">
		<view class="combox">
			<view class="goods-item" v-for="(goodsItem, goodsIndex) in orderInfo.orderProductList" :key="goodsIndex">
				<image class="goods-img" :src="staticUrl + goodsItem.imgUrl" mode="aspectFill"
					style="width: 140rpx;height: 140rpx;"></image>
				<view class="right">
					<text class="title clamp">{{goodsItem.productName}}</text>
					<text class="attr-box">{{goodsItem.productAttrInfo}} x {{goodsItem.productCount}}件</text>
					<text class="price">{{goodsItem.totalPrice}}</text>
				</view>
				<view class="btn u-flex">
					<button class="action-btn recom" v-if="goodsItem.status ==1 " @click="shouhuo(goodsItem.id)" >确认收货</button>
					<button class="action-btn recom" v-if="goodsItem.status ==1">查看物流</button>
					<button class="action-btn recom" v-if="goodsItem.status ==2" @click="pingjia(goodsItem.id)" >评价</button>
				</view>
			</view>
		</view>
		<view class="combox">
			<view class="lebals">
				<text>订单编号：</text>{{orderInfo.id}}
			</view>
			<view class="lebals">
				<text>下单时间：</text>{{orderInfo.createTime}}
			</view>
			<view class="lebals">
				<text>支付方式：</text>{{orderInfo.payInfo || '微信支付'}}
			</view>
			<view class="lebals">
				<text>支付时间：</text>{{orderInfo.payTime  || '--'}}
			</view>
		</view>
		<view class="combox u-flex u-flex-between">
			<text style="font-size: 24rpx;">共计：<text class="price">{{orderInfo.totalPrice}}</text></text>
			<view class="u-flex u-flex-between">
				<button class="action-btn" @click="goPay" v-if="orderInfo.status ==0">立即支付</button>
				<!-- <button class="action-btn recom">查看物流</button> -->
			</view>
			
		</view>
		<view class="combox">
			<view style="color: #333;font-size: 30rpx;">配送信息：</view>
			<view class="lebals">
				<text>收货地址：</text>{{orderInfo.receiveAddress}}
			</view>
			<view class="lebals">
				<text>收 货 人：</text>{{orderInfo.receivePerson}}
			</view>
			<view class="lebals">
				<text>联系方式：</text>{{orderInfo.receivePhone}}
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				staticUrl: ''
			}
		},
		onShow() {
			this.staticUrl = this.glob.staticUrl
			// this.orderInfo = this.$api.prePage().checkedInfo
			this.getorderInfo(this.orderInfo.id)
		},
		methods: {
			goPay(){
				uni.navigateTo({
					url: '/pages/money/pay'
				})
			},
			pingjia(id){
				this.$refs.uToast.success(`敬请期待！`)
				// uni.navigateTo({
				// 	url: '/pages/order/comment?id=' + id
				// })
			},
			getorderInfo(id){
				uni.$u.http.post('/queryMyOrder', {id}).then(res=>{
					console.log(res,888);
					if(res&&res.length>0){
						this.orderInfo = res[0]
					}else{
						this.orderInfo = this.$api.prePage().checkedInfo
					}
					
				})
			},
			shouhuo(id){
				uni.showModal({
					content: '确认收货？',
					success: (e) => {
						if (e.confirm) {
							uni.$u.http.post('/confirmOrder', {
								orderProductId: id,
								orderId:this.orderInfo.id
							}).then(res => {
								this.getorderInfo(this.orderInfo.id)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.order-item-page {
		background: $page-color-base;
		height: 100%;
	}

	.combox {
		padding: 20rpx;
		background-color: #fff;
		margin: 10rpx;
		border-radius: 24rpx;
		
		.goods-item {
			display: flex;
			padding-bottom: 50rpx;
			position: relative;
			.btn{
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
		.lebals{
			font-size: 28rpx;
			color: #333;
			padding-top: 10rpx;
			text{
				color: #adb1b8;
			}
			
		}
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 30upx 0 24upx;
		overflow: hidden;

		.title {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			line-height: 1;
		}

		.attr-box {
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			padding: 10upx 12upx;
		}

		
	}
.price {
			font-size: $font-base + 2upx;
			color: $uni-color-primary;

			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	.action-btn {
		width: 160upx;
		height: 50upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 50upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;

		&:after {
			border-radius: 100px;
		}

		&.recom {
			background: #fff9f9;
			color: $base-color;

			&:after {
				border-color: #f7bcc8;
			}
		}
	}
</style>
